{% extends 'base/base.html' %}
{% load static %}


{% block title %}
<title>书籍列表</title>
{% endblock %}

{% block css %}
<style>
  .media{
    width:100%;
  }
  .media .media-left img{
    width: 100px;
  }

</style>
{% endblock %}

{% block body %}

{% for b in page %}
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="{% static 'img/翠星石3.jpg' %}" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">{{ b.title }}</h4>
    <p>{{ b.desc }}</p>
  </div>
</div>

{% endfor %}
<nav aria-label="Page navigation">
  <ul class="pagination">
    {% if page.has_previous %}
    <li>
      <a href="?page={{ page.previous_page_number }}" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    {% endif %}

    {% for page_num in page.paginator.get_elided_page_range %}
    <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
    {% endfor %}


    {% if page.has_next %}
    <li>
      <a href="?page={{ page.next_page_number }}" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
    {% endif %}

  </ul>
</nav>
{% endblock %}